<template>
  <div class="container" @touchmove.prevent>
    <navbar
      :vaniconL="true"
      :vaniconR="false"
      :noRight="true"
      iconNameL="arrow-left"
      iconNameR="icon-gengduo"
      @clickLeft="goBack"
      @clickRight="showShare = true"
    >{{$t('detail.image_details')}}</navbar>

    <div class="image-container">
      <div class="select-icon" @click="arrowClick">
        <van-icon :name="listFlag ? 'arrow-left':'arrow'" color="#ffffff" />
      </div>
      <transition name="fade">
        <ul class="image-list" v-show="listFlag">
          <li
            class="image-box"
            :class="wNow == index ? 'lineNow':''"
            @click="clickNow(index)"
            v-for="(item,index) in windowArr"
            :key="index"
          >
            <img :src="item.url" alt />
            <span :class="wNow == index ? 'windowNow':''" class="window">{{item.title}}</span>
          </li>
        </ul>
      </transition>
    </div>
    <div class="canvas-box">
      <div ref="rcc" v-show="rcFlag" class="canvas" @cornerstoneimagerendered="onImageRendered"></div>
      <div ref="lcc" v-show="lcFlag" class="canvas" @cornerstoneimagerendered="onImageRendered2"></div>
      <div ref="rm" v-show="rmFlag" class="canvas" @cornerstoneimagerendered="onImageRendered3"></div>
      <div ref="lm" v-show="lmFlag" class="canvas" @cornerstoneimagerendered="onImageRendered4"></div>
    </div>

    <div class="canvas-tip2">
      <span>图像: {{wNow+1}}/4</span>
    </div>
    <div class="canvas-tip">
      <span>缩放: {{wwwc.length>0&&wwwc[wNow].scale? `${wwwc[wNow].scale}`:'----'}}</span>
    </div>
    <div class="canvas-tip1">
      <span>WW/WC: {{wwwc.length>0? `${wwwc[wNow].w}/${wwwc[wNow].c}`:'--/--'}}</span>
      <span>宽/高: {{wwwc.length>0? `${wwwc[wNow].W}/${wwwc[wNow].H}`:'--/--'}}</span>
    </div>

    <div class="footer">
      <span class="btn">
        <span class="icon icon-duibi" :class="wwwcFlag? 'nowClick':''" @click="wwcDisplay"></span>
        <span class="text">{{$t('detail.window')}}</span>
      </span>
      <span class="btn">
        <span class="icon icon-sy" :class="zoomFlag? 'nowClick':''" @click="zoomDisplay"></span>
        <span class="text">缩放移动</span>
      </span>
      <span class="btn">
        <span class="icon icon-fanse" @click="bigDisplay"></span>
        <span class="text">反转色</span>
      </span>
      <span class="btn">
        <span class="icon icon-rengongzhinengdanao" @click="ai"></span>
        <span class="text">AI标注</span>
      </span>
      <span class="btn">
        <span class="icon icon-zhongzhi" @click="reset"></span>
        <span class="text">{{$t('detail.reset')}}</span>
      </span>
    </div>
  </div>
</template>

<script>
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import * as cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import * as dicomParser from "dicom-parser";
import Hammer from "hammerjs";
import navbar from "@/components/navbar";
import { Toast } from "vant";
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.init();
export default {
  name: "drDetail",
  components: { navbar },
  data() {
    return {
      showShare: false, // 分享flag
      windowArr: [
        {
          title: "RCC",
          url: "https://ds.pushiyixue.com/file/A1366/org_img/rc/rc.jpg",
        },
        {
          title: "LCC",
          url: "https://ds.pushiyixue.com/file/A1366/org_img/lc/lc.jpg",
        },
        {
          title: "RMLO",
          url: "https://ds.pushiyixue.com/file/A1366/org_img/rm/rm.jpg",
        },
        {
          title: "LMLO",
          url: "https://ds.pushiyixue.com/file/A1366/org_img/lm/lm.jpg",
        },
      ],
      wNow: 0,
      listFlag: true,
      wwwcFlag: false, // wwwc列表flag
      zoomFlag: false,
      nowImg: [
        {
          img: "rc",
          long: 500,
        },
        {
          img: "lc",
          long: -500,
        },
        {
          img: "rm",
          long: 650,
        },
        {
          img: "lm",
          long: -650,
        },
      ],
      rcFlag: true,
      lcFlag: true,
      rmFlag: true,
      lmFlag: true,
      wwwc: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 初始化
    updateTheImage(r, img, long) {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        overlay: true,
        message: "加载中",
      });
      this.$nextTick(() => {
        let ele = r;
        let _this = this;
        cornerstone
          .loadAndCacheImage(
            `wadouri:https://ds.pushiyixue.com/file/A1366/org_img/${img}/${img}.dcm`
          )
          .then(function (image) {
            // console.log(image);
            _this.wwwc.push({
              w: image.windowWidth,
              c: image.windowCenter,
              W: image.width,
              H: image.height,
              scale: 0,
            });
            Toast.clear();
            cornerstone.displayImage(ele, image);
            let viewport = cornerstone.getViewport(ele);
            viewport.translation = { x: long, y: 0 };
            cornerstone.setViewport(ele, viewport);
            cornerstone.updateImage(ele);
          });
      });
    },
    // 监听图像
    onImageRendered(e) {
      let eventData = e.detail;
      if (typeof this.wwwc[0] == "object") {
        this.$set(this.wwwc[0], "scale", eventData.viewport.scale.toFixed(2));
        this.wwwc[0].w = Math.round(eventData.viewport.voi.windowWidth);
        this.wwwc[0].c = Math.round(eventData.viewport.voi.windowCenter);
      }
    },
    onImageRendered2(e) {
      let eventData = e.detail;
      if (typeof this.wwwc[1] == "object") {
        this.$set(this.wwwc[1], "scale", eventData.viewport.scale.toFixed(2));
        this.wwwc[1].w = Math.round(eventData.viewport.voi.windowWidth);
        this.wwwc[1].c = Math.round(eventData.viewport.voi.windowCenter);
      }
    },
    onImageRendered3(e) {
      let eventData = e.detail;
      if (typeof this.wwwc[2] == "object") {
        this.$set(this.wwwc[2], "scale", eventData.viewport.scale.toFixed(2));
        this.wwwc[2].w = Math.round(eventData.viewport.voi.windowWidth);
        this.wwwc[2].c = Math.round(eventData.viewport.voi.windowCenter);
      }
    },
    onImageRendered4(e) {
      let eventData = e.detail;
      if (typeof this.wwwc[3] == "object") {
        this.$set(this.wwwc[3], "scale", eventData.viewport.scale.toFixed(2));
        this.wwwc[3].w = Math.round(eventData.viewport.voi.windowWidth);
        this.wwwc[3].c = Math.round(eventData.viewport.voi.windowCenter);
      }
    },
    // 返回上一页
    goBack() {
      this.$router.push({ path: "/drList" });
    },
    // 选择窗位
    clickNow(i) {
      this.wNow = i;
      switch (i) {
        case 0:
          this.rcFlag = true;
          this.lcFlag = false;
          this.rmFlag = false;
          this.lmFlag = false;
          break;
        case 1:
          this.rcFlag = false;
          this.lcFlag = true;
          this.rmFlag = false;
          this.lmFlag = false;
          break;
        case 2:
          this.rcFlag = false;
          this.lcFlag = false;
          this.rmFlag = true;
          this.lmFlag = false;
          break;
        case 3:
          this.rcFlag = false;
          this.lcFlag = false;
          this.rmFlag = false;
          this.lmFlag = true;
          break;
      }
    },
    // 弹出窗位
    arrowClick() {
      this.listFlag = !this.listFlag;
    },

    // wwwc工具
    wwcDisplay() {
      cornerstoneTools.setToolDisabled("Zoom");
      cornerstoneTools.setToolDisabled("Pan");
      cornerstoneTools.setToolDisabled("ZoomTouchPinch");
      this.wwwcFlag = !this.wwwcFlag;
      this.zoomFlag = false;
      if (this.wwwcFlag) {
        let WwwcTool = cornerstoneTools.WwwcTool;
        cornerstoneTools.addTool(WwwcTool);
        cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 });
      } else {
        cornerstoneTools.setToolDisabled("Wwwc");
      }
    },
    // 放大镜
    zoomDisplay() {
      cornerstoneTools.setToolDisabled("Wwwc");
      this.zoomFlag = !this.zoomFlag;
      this.wwwcFlag = false;
      if (this.zoomFlag) {
        let PanTool = cornerstoneTools.PanTool;
        cornerstoneTools.addTool(PanTool);
        cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
        const ZoomTouchPinchTool = cornerstoneTools.ZoomTouchPinchTool;
        cornerstoneTools.addTool(ZoomTouchPinchTool, {
          configuration: {
            invert: false,
            preventZoomOutsideImage: false,
            minScale: 0.1,
            maxScale: 20.0,
          },
        });
        cornerstoneTools.setToolActive("ZoomTouchPinch", {
          mouseButtonMask: 1,
        });
      } else {
        cornerstoneTools.setToolDisabled("Zoom");
        cornerstoneTools.setToolDisabled("Pan");
        cornerstoneTools.setToolDisabled("ZoomTouchPinch");
      }
    },
    // 反转色
    bigDisplay() {
      let element;
      let i = this.wNow;
      switch (i) {
        case 0:
          element = this.$refs.rcc;
          break;
        case 1:
          element = this.$refs.lcc;
          break;
        case 2:
          element = this.$refs.rm;
          break;
        case 3:
          element = this.$refs.lm;
          break;
      }
      let viewport = cornerstone.getViewport(element);
      viewport.invert = !viewport.invert;
      cornerstone.setViewport(element, viewport);
    },

    // 重置
    reset() {
      let element;
      let i = this.wNow;
      switch (i) {
        case 0:
          element = this.$refs.rcc;
          break;
        case 1:
          element = this.$refs.lcc;
          break;
        case 2:
          element = this.$refs.rm;
          break;
        case 3:
          element = this.$refs.lm;
          break;
      }
      cornerstoneTools.setToolDisabled("Wwwc");
      cornerstoneTools.setToolDisabled("Pan");
      cornerstoneTools.setToolDisabled("Zoom");
      cornerstoneTools.setToolDisabled("ZoomTouchPinch");
      this.wwwcFlag = false;
      this.zoomFlag = false;
      cornerstone.reset(element);
      this.updateTheImage(
        element,
        this.nowImg[this.wNow].img,
        this.nowImg[this.wNow].long
      );
    },
    ai() {
      Toast.fail("暂无标注");
    },
  },
  created() {},
  mounted() {
    let rcc = this.$refs.rcc;
    let lcc = this.$refs.lcc;
    let rm = this.$refs.rm;
    let lm = this.$refs.lm;
    cornerstone.enable(rcc);
    cornerstone.enable(lcc);
    cornerstone.enable(rm);
    cornerstone.enable(lm);
    this.updateTheImage(rcc, "rc", 500);
    this.updateTheImage(lcc, "lc", -500);
    this.updateTheImage(rm, "rm", 650);
    this.updateTheImage(lm, "lm", -650);
    this.lcFlag = false;
    this.rmFlag = false;
    this.lmFlag = false;
  },
  destroyed() {},
};
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: black;
}
.footer {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 0.2rem;
  box-sizing: border-box;
  height: 0.45rem;
  background: #4775d9;
  background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
  color: #fff;
  & .icon {
    font-size: 0.2rem;
  }
  & .btn {
    & .text {
      display: block;
      font-size: 0.12rem;
      margin-top: 0.02rem;
    }
  }
}
.image-container {
  position: relative;
  overflow: hidden;
  overflow-x: scroll;
  height: 0.7rem;
  background: transparent;
  & .select-icon {
    position: fixed;
    left: 0;
    top: 0.6rem;
    width: 0.25rem;
    height: 0.4rem;
    line-height: 0.45rem;
    background: #1b59df;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 5;
  }
  & .image-list {
    float: left;
    margin-left: 0.3rem;
    margin-top: 0.02rem;
    height: 0.65rem;
    list-style: none;
    white-space: nowrap;
    display: inline-flex;
    & .image-box {
      float: left;
      width: 0.65rem;
      height: 0.65rem;
      border: 1px solid #666;
      box-sizing: border-box;
      margin-right: 0.05rem;
      position: relative;
      overflow: hidden;
      & img {
        width: 100%;
        height: 100%;
      }
      & .window {
        display: inline-block;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 0.14rem;
        color: #ffffff;
      }
    }
  }
}

.windowNow {
  background: #4775d9;
}
.lineNow {
  border: 1px solid #4775d9 !important;
}

.image-container::-webkit-scrollbar {
  display: none;
}
// .fade-enter-active,
// .fade-leave-active {
//   transition: opacity 0.5s;
// }
// .fade-enter,
// .fade-leave-active {
//   opacity: 0;
// }

.fade-enter-active {
  transition: all 0.3s ease;
}
.fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter, .fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(-120px);
  opacity: 0;
}

.canvas-box {
  height: 4.74166rem;
  // height: 73vh;
  width: 100%;
  & .canvas1 {
    width: 100%;
    height: 100%;
  }

  & .canvas {
    width: 100%;
    height: 100%;
  }
}

.nowClick {
  color: rgba(255, 0, 0, 0.87);
}

.canvas-tip {
  position: fixed;
  padding: 0 0.08rem;
  box-sizing: border-box;
  bottom: 0.8rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
  color: white;
  & span {
    display: inline-block;
    font-size: 0.14rem;
  }
}

.canvas-tip1 {
  position: fixed;
  padding: 0 0.08rem;
  box-sizing: border-box;
  bottom: 0.6rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
  color: white;
  & span {
    display: inline-block;
    font-size: 0.14rem;
  }
}
.canvas-tip2 {
  position: fixed;
  padding: 0 0.08rem;
  box-sizing: border-box;
  top: 1.2rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
  color: white;
  & span {
    display: inline-block;
    font-size: 0.14rem;
  }
}
</style>